<template>
    <div class="z-upload">
        <div class="upload">
            <n-upload ref="upload" :show-file-list="false" v-model:file-list="fileList" multiple directory-dnd :custom-request="customRequest">
                <n-upload-dragger style="max-width: 100%; width: 100%;">
                    <div style="margin-bottom: 12px">
                        <n-icon size="48" :depth="3">
                            <archive-icon />
                        </n-icon>
                    </div>
                    <n-text style="font-size: 16px">
                        点击或者拖动文件上传
                    </n-text>
                    <n-p depth="3" style="margin: 8px 0 0 0;">
                        可以直接粘贴图片完成上传ヾ(≧▽≦*)o
                    </n-p>
                </n-upload-dragger>
            </n-upload>
        </div>
        <div class="scrollbar">
            <n-scrollbar style="max-height: calc(100vh - 246.4px)">
                <upload-list :file-list="fileList" />
            </n-scrollbar>
        </div>
        <div class="bottom">本图床暂不对外开放，只在内部使用，感谢合作</div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import UploadList from './UploadList.vue'
// @ts-ignore
import { upFlie, copyText, cdnUrl } from '@/tool'
import { ArchiveOutline as ArchiveIcon } from '@vicons/ionicons5'
import {
    useMessage,
    UploadCustomRequestOptions,
    UploadFileInfo,
    UploadInst,
} from 'naive-ui'
const message = useMessage()
const fileList = ref<UploadFileInfo[]>([])
const upload = ref<UploadInst | null>(null)
// 上传
const customRequest = ({
    file,
    onFinish,
    onError,
    onProgress,
}: UploadCustomRequestOptions) => {
    let m = message.info('开始上传！')
    onProgress({ percent: 0 })
    upFlie(
        file.file,
        file.id,
        (res: any) => {
            onProgress({ percent: Math.ceil(res.total.percent) })
        },
        (res: any) => {
            m.destroy()
            file.url = cdnUrl + res.key
            // copyText(file.url) // 不自动复制，会复制失败
            message.success('上传成功,点击列表项可复制链接')
            onFinish()
        },
        () => {
            m.destroy()
            message.error('上传失败')
            onError()
        }
    )
}

// 粘贴上传
onMounted(() => {
    document.addEventListener('paste', (e) => {
        // @ts-ignore
        var items = (e.clipboardData || window.clipboardData).items || []
        var file = null

        if (items && items.length) {
            for (var i = 0; i < items.length; i++) {
                console.log(items[i].type)
                if (items[i].type.indexOf('image') !== -1) {
                    file = items[i].getAsFile()
                    break
                }
            }
        }

        if (!file) {
            message.error('只支持粘贴图片上传！')
            return
        }
        let id = 'z-' + new Date().getTime()
        fileList.value.push({
            id: id,
            name: file.name,
            percentage: 0,
            status: 'pending',
            file: file,
            type: file.type,
        })
        console.log(file)
        // @ts-ignore
        upload.value?.submit(id)
    })
})
</script>

<style scoped lang="scss">
.z-upload {
    position: relative;
    max-width: 512px;
    width: 95%;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    height: 100%;
    .upload {
        margin-top: 20px;
    }
    .scrollbar {
        margin-top: 10px;
        flex: 1;
        margin-bottom: 20px;
    }
    .bottom {
        height: 24px;
        text-align: center;
        color: red;
    }
}
</style>

<style>
.n-upload-trigger {
    width: 100%;
}
</style>